<template>
  <div>

    <div stle="margin-bottum: 20px">
      <RouterLink to="/manager/test">通过router跳转到Test.vue </RouterLink> |
      <a href="/manager/test">通过a标签跳转到Test.vue</a>
    </div>

    <div style="margin:20px 10px">
      <el-button type="info" @click="router.push('/manager/test')">push方法点击跳转到Test.vue</el-button>
      <el-button type="success" @click="router.replace('/manager/test')">replace方法点击跳转到Test.vue</el-button>
    </div>

    <div style="margin:20px 0">
      <el-button type="warning" @click="router.push('/manager/test?id=1')">路由传参id=1</el-button>
      <el-button type="success" @click="router.push('/manager/test?id=2&userName=虾米')">路由传参id=1和名字=虾米</el-button>
      <el-button type="info" @click="router.push({ path: '/manager/test', query: { id: 1, userName: '虾米' }})">路由传参id=1和名字=虾米</el-button>
    </div>

    <div>
    <el-input v-model="data.input" style="width: 240px;margin:10px" placeholder="请输入内容" :prefix-icon="Search"/>{{data.input}}
    <el-input v-model="data.input1" style="width: 240px" placeholder="搜索" :suffix-icon="Calendar"/>{{data.input1}}
    <el-input v-model="data.password" style="width: 240px" type="password" placeholder="Please input password" show-password/>
    <el-input v-model="data.desc" :rows="5" style="width: 240px" placeholder="placeholder" type="textarea"/>
    </div>
      <div style="margin:30px 0">
    <el-select
        v-model="data.value"
        placeholder="请选择水果"
        size="medium"
        style="width: 240px"
    >
      <el-option
          v-for="item in data.options"
          :key="item"
          :label="item"
          :value="item"
      />
    </el-select>{{data.value}}

    <el-select v-model="data.value1" placeholder="选择你的游戏" clearable style="width: 240px" multiple value-key="id">
      <el-option
          v-for="item in data.optionsList"
          :key="item.id"
          :label="item.label"
          :value="item.name">
      </el-option>
    </el-select>{{data.value1}}
  </div>

      <div style="margin:20px 0">
    <el-radio-group v-model="data.sex">
      <el-radio value="男">男</el-radio>
      <el-radio value="女">女</el-radio>
    </el-radio-group>
  </div>
      <div style="margin:20px 0">
        <el-radio-group style="margin-left: 100px" v-model="data.radio1" size="large">
          <el-radio-button label="我的订单" value="1" />
          <el-radio-button label="我的评论" value="2" />
          <el-radio-button label="我的收藏" value="3" />
          <el-radio-button label="我的帖子" value="4" />
        </el-radio-group>
      </div>
      <div style="margin:20px 0">
        <el-checkbox-group v-model="data.checkList" size="large">
          <el-checkbox v-for="item in data.optionsList" :key="item.id" :label="item.label" :value="item.name"/>
        </el-checkbox-group>
        <span style="margin-left: 30px">{{data.checkList}}</span>
      </div>
      <div style="margin:20px 0">
        <img src="../assets/logo.svg"  style="width: 200px;height:200px; margin-left: 30px"/>
        <el-image :src="img"  style="width: 200px;height:200px;" :preview-src-list="[img, 'https://fuss10.elemecdn.com/1/34/19aa98b1fcb2781c4fba33d850549jpeg.jpeg',
      'https://fuss10.elemecdn.com/0/6f/e35ff375812e6b0020b6b4e8f9583jpeg.jpeg']"/>
        <el-image :src="data.url"/>
      </div>
      <div style="margin:20px 0">
        <el-carousel height="500px"  style="width: 500px;">
          <el-carousel-item v-for="item in data.imgUrl" :key="item">
            <img style="width:400px; height: 400px" :src="item" alt="">
          </el-carousel-item>
        </el-carousel>
      </div>

      <div style="margin:20px 0">
        <el-date-picker
            v-model="data.date"
            type="date"
            placeholder="请选择日期"
            format="YYYY-MM-DD"
            value-format="YYYY-MM-DD"
        />{{data.date}}
      </div>

      <div style="margin:20px 0">
        <el-date-picker
            v-model="data.date1"
            type="datetime"
            placeholder="请选择日期与时间"
            format="YYYY-MM-DD HH:mm:ss"
            value-format="YYYY-MM-DD HH:mm:ss"
        />{{data.date1}}
      </div>

      <div style="margin:20px 0">
        <el-time-picker
            v-model="data.time"
            placeholder="选择时间"
            value-format="HH:mm:ss"
            format="HH:mm:ss"
        />{{data.time}}
      </div>

      <div style="margin:20px 0">
        <el-date-picker
            v-model="data.daterange"
            type="daterange"
            range-separator="至"
            start-placeholder="起始日期"
            end-placeholder="截止日期"
            format="YYYY-MM-DD"
            value-format="YYYY-MM-DD"
        />{{data.daterange?.length ? data.daterange[0] : '' }} {{data.daterange?.length ? data.daterange[1] : ''}}
      </div>

      <div style="margin:20px 0">
        <el-table :data="data.tableData" style="width: 100%" max-height="400px" border stripe>
          <el-table-column prop="id" label="用户ID" width="180"/>
          <el-table-column prop="date" label="日期" width="180" />
          <el-table-column prop="name" label="名称" width="180" />
          <el-table-column prop="address" label="地址" />
          <el-table-column label="操作">
            <template #default="scope">
              <el-button type="primary" circle @click="edit(scope.row)">
                <el-icon><Edit /></el-icon>
              </el-button>
              <el-button type="danger" circle @click="del(scope.row.id)">
                <el-icon><Delete /></el-icon>
              </el-button>
            </template>
          </el-table-column>
        </el-table>
        <div style="padding: 10px 0">
          <el-pagination
              v-model:current-page="data.currentPage"
              v-model:page-size="data.pageSize"
              :page-sizes="[5, 10, 15, 20]"
              :size="size"
              :background="data.color"
              layout="total, sizes, prev, pager, next, jumper"
              :total="18"
          />
        </div>
      </div>

        <el-dialog v-model="data.dialogVisible" title="编辑信息" width="800">
          <div style="padding:20px">
            <div style="margin:20px 0">用户ID：{{ data.row.id }}</div>
            <div style="margin:20px 0">日期：{{ data.row.date }}</div>
            <div style="margin:20px 0">用户名：{{ data.row.name }}</div>
            <div style="margin:20px 0">地址：{{ data.row.address }}</div>
          </div>
        </el-dialog>

      </div>
</template>

<script setup>
import {reactive,ref} from "vue";
import {Search} from "@element-plus/icons-vue"
import {Calendar} from"@element-plus/icons-vue"
import img from "@/assets/logo.svg"
import lun1 from "@/assets/images/lun1.png"
import lun2 from "@/assets/images/lun2.png"
import lun3 from "@/assets/images/lun3.png"
import lun4 from "@/assets/images/lun4.png"
import lun5 from "@/assets/images/lun5.png"
import router from "@/router/index.js"
import request from "@/utils/request.js"

const data = reactive({
  input:"",
  input1:"",
  password:"",
  desc:"带你做完整的前后端分离项目，适合计算机毕业设计、实习项目、Java、Vue编程练手项目",
  value:"",
  value1:"",
  options:["苹果","荔枝","香蕉"],
  optionsList:[
    {id:1, label:"王者荣耀",name:"王者荣耀"},
    {id:2, label:"LOL", name:"LOL1"},
    {id:3, label:"第五人格",name:"第五人格"},
    {id:4, label:"LOL",name:"LOL2"}],
  sex:"男",
  radio1:"1",
  checkList:[],
  url:"https://fuss10.elemecdn.com/a/3f/3302e58f9a181d2509f3dc0fa68b0jpeg.jpeg",
  imgUrl:[lun1,lun2,lun3,lun4,lun5],
  date:'',
  date1:'',
  time:'',
  daterange:[],
  currentPage: 1,
  pageSize: 5,
  color:true,
  tableData:[
    { id:1, date:'2023-02-22',name:"小明",address:"珠江新城花城大道66号A5454" },
    { id:2, date:'2023-02-21',name:"小红",address:"高原路1号二楼财务室" },
    { id:3, date:'2023-02-02',name:"小商",address:"双福路中段邮政储蓄银行" },
  ],
  dialogVisible: false,
  row:null,
  employeeList: []
})

request.get('employee/selectAll').then(res =>{
  console.log(res)    //打印数据
  data.employeeList = res.data     //res.data就是员工的一个数组
  console.log(data.employeeList)
})

const del = (id) => {
    alert("删除ID" + id + "的数据")
}

const edit = (row) => {
  data.row = row
  data.dialogVisible = true
}

data.tableData = data.tableData.splice(0,5)  //假数据处理
</script>